<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
		<link href="css/login.css" rel="stylesheet" />
		<script src="js/mui.js"></script>
		<script src="js/weixin_utils.js"></script>
		<script type="text/javascript">
			mui.init();
			mui.plusReady(function(){
				document.getElementById("register-button").addEventListener("tap",function(){
					// 获取表单数据
					var nickname = document.getElementById("nickname").value;
					var account = document.getElementById("account").value;
					var phone = document.getElementById("phone").value;
					var password = document.getElementById("password").value;
					
					var param = new Object();
					param.nickname = nickname;
					param.account = account;
					param.phone = phone;
					param.password = password;
					
					// 发送注册请求
					util.ajax({
						url:api.register,
						data:param,
						success:function(data){
							if(data.code == 200 && data.httpCode == 200){
								plus.nativeUI.toast("注册成功");
								setTimeout(function(){
									// 获取当前页面
									var cpage = plus.webview.currentWebview();
									// 跳转至登录页面 
									plus.webview.open("login.html","login.html");
									// 关闭注册页
									cpage.close();
								},2000)
							}else{
								plus.nativeUI.toast(data.msg);
							}
						}
					});
				})
			})
		</script>
	</head>

	<body>
		<div class="login-page register" style="padding-top: 270px; display: flex; justify-content: center;">
			<form class="mui-input-group register-content"  style="color: azure;z-index: 2;">
				<div  class="mui-input-row">
					<label>昵称：</label>
					<input type="text" class="mui-input-clear" id="nickname">
				</div>
			    <div class="mui-input-row">
					<label>账号：</label>
					<input type="text" class="mui-input-clear" id="account">
			    </div>
				<div class="mui-input-row">
					<label>手机号：</label>
					<input type="number" class="mui-input-clear" id="phone">
				</div>
			    <div class="mui-input-row">
					<label>密码：</label>
			        <input type="password" class="mui-input-password" id="password">
			    </div>
			    <div class="mui-button-row" style="margin-top: 20px;">
					<button id="register-button" type="button" class="mui-btn" style="border: 0;">注册</button>
			    </div>
			</form>
		</div>
	</body>

</html>
<script type="text/javascript">
mui(document.body).on('tap', '.mui-btn', function(e) {
    mui(this).button('loading');
    setTimeout(function() {
        mui(this).button('reset');
    }.bind(this), 300);
});

var originalHeight = document.documentElement.clientHeight || document.body.clientHeight;
	window.onresize = function() {
		//软键盘弹起与隐藏  都会引起窗口的高度发生变化
		var resizeHeight = document.documentElement.clientHeight || document.body.clientHeight;
		if (resizeHeight * 1 < originalHeight * 1) { //resizeHeight<originalHeight证明窗口被挤压了
			plus.webview.currentWebview().setStyle({
				height: originalHeight
			});
		}
	}

</script>